<template>
  <div class="head">
    <div class="top">
      <div class="shopSearch">
        <em class="iconfont" @click="vfun_sree">&#xe61b;</em>
        <input type="text" v-model="saleGoodsQb.fullTextFilterStr" placeholder="搜索" @input="vfun_sree">
      </div>
    </div>

    <div class="good-section">
      <div class="left-nav">
        <ul>
          <li v-for="(item,index) in GoodsCategorySet.list" @click="vfun_categorys(index,GoodsCategorySet.list)" :class="{activecate:index===vue_list_index}">{{item.categoryName}}</li>
        </ul>
      </div>
      <div class="right">
        <div class="gao-banner">
          <img :src="advListPicurl" />
        </div>
        <div class="isnull" v-if="SaleGoodsSet.list==''">
          <img src="../../assets/img/landing.gif" v-if="vue_null" />
          <em class="iconfont" style="font-size: 100px;color: #ccc;" v-else>&#xe600;</em>
        </div>
        <div class="classList">

          <div class="guanggao">
            <div v-for="(item,index) in SaleGoodsSet.list" style="width: 33.33%;" @click="vfun_go(index,SaleGoodsSet.list)">
              <img :src="item.goodsBigPic" v-if="SaleGoodsSet.list[index].goodsBigPic!=''" />
              <img src="../../../static/noImg.png" v-else />
              <h2>{{item.goodsName}}</h2>
            </div>
          </div>
        </div>
      </div>
    </div>
    <vue-footer></vue-footer>
  </div>
</template>

<script>
  import vueFooter from '../../components/footer/shopFooter'
  export default {
    components:{vueFooter},
    name: 'hello',
    data () {
      return {
        advListPicurl:'',
        GoodsCategorySet:{
          "list":[],
        },
        SaleGoodsSet:{
          "list":[],
        },
        vue_null:true,
        saleGoodsQb:{
          "fullTextFilterStr":"",
          "categoryCode":"",
        },
        vue_list_index:0
      }
    },
    methods:{
      vfun_sree(){
        this.queryByPage();
      },
      vfun_go(index,obj){
        localStorage.setItem("goodsCode",obj[index].goodsCode);
        this.$router.push({path:"/goodsDetails"})
      },
      vfun_categorys(index,obj){
        this.vue_list_index=index;
        this.saleGoodsQb.categoryCode=obj[index].categoryCode;
        this.queryByPage();
      },
      categorys(){
        this.axios({
          method: 'POST',
          url: "/v3/goods/categorys/listAll",
          data:{
            "categoryParentCode":"-1"
          }
        }).then((res) => {
          this.GoodsCategorySet.list=res.data.list;
        }).catch((err)=>{

        });
      },
      queryByPage(){
        this.axios({
          method: 'POST',
          url: "/v3/sale/goodss/list",
          data:{
            "categoryCode":this.saleGoodsQb.categoryCode,
            "fullTextFilterStr":this.saleGoodsQb.fullTextFilterStr,
          }
        }).then((res) => {
          this.SaleGoodsSet.list=res.data.list;
          if(this.SaleGoodsSet.list==''){
            this.vue_null=false;
          }
        }).catch((err)=>{
          this.vue_null=false;
        });
      },

    },
    activated(){
      this.categorys();
      this.queryByPage();
      document.querySelector('#vue_id_title').innerHTML="分类";
      this.axios({
        method: 'GET',
        url: "/v3/portal/pages/appIndex",
        data:{
        }
      }).then((res) => {
        this.advListPicurl=res.data.portalAdvListDataList[0].advListPicurl;

      }).catch((err)=>{
      });
    },
    mounted(){
      this.categorys();
      this.queryByPage();
      this.axios({
        method: 'GET',
        url: "/v3/portal/pages/appIndex",
        data:{
        }
      }).then((res) => {s
        this.advListPicurl=res.data.portalAdvListDataList[0].advListPicurl;

      }).catch((err)=>{
      });
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }
  a {
  }

  .top{
    border-bottom: 1px  #E7E7E9 solid;
  }

  .shopSearch input{
    width: 90%;
    border-radius: .2rem;
    border: 0;
    height: .87rem;
  }

  .shopSearch{
    border: 1px #E7E7E9 solid;
    text-align: center;
    width: 90%;
    background: #fff;
    margin: .3rem auto .3rem;
    border-radius: .2rem;
    /*border-bottom: 1px solid #E7E7E9;*/
  }


  .sree{
    width: 100%;
    height: 1.2rem;
    /*background: url(../../assets/img/bg.jpg);*/
    background-size:auto 100%;
    z-index: 100;

    position: fixed;
    top: 0;
    width: 100%;
    display: -webkit-box;
  }
  .sree .sreinput{
    line-height: 0.6rem;
    background: #fff;
    -webkit-box-flex: 1;
    border-radius:100px;
    height: 0.6rem;
    display: -webkit-box;
  }
  .sreinput input{
    display: block;
    border: 0;
    height: 0.8rem;
    margin-top: 1px;
    box-sizing: border-box;
    -webkit-box-flex: 1;
    border-radius:5px;
    font-size: 12px;
    text-indent:10px;
    border: 1px solid #ccc;
    background:transparent;
  }
  .sree div{
    margin-top: 0.2rem;
  }
  .sree div em{
    display: block;
    color: #666;
    font-size: 25px;
    margin-left: 3%;
  }
  .logo {
    padding:0 2%;
    /*font-size: 16px;*/
    line-height: 0.88rem;
  }
  .land{
    width: 10%;
    text-align: center;
    font-size: 14px;
    line-height: 0.8rem;
  }
  .good-section{
    /*margin-top: 1.2rem;*/
    display: -webkit-box;
    padding-bottom: 1.6rem;
  }
  .left-nav{

    /*-webkit-box-flex: 1;*/
    /*border-right:1px solid #ccc ;*/
  }
  .left-nav>ul{
    background:#F0F0F5;

  }
  .left-nav li{
    position:relative;
    font-size: 13px;
    text-align: center;
    padding: 0.3rem 0;
    border-bottom: 1px solid #E7E7E9;
    width: 2rem;
  }
  .right{
    -webkit-box-flex: 1;
  }
  .guanggao{
    /*display: -webkit-box;*/
    width: 100%;
  }
  .guanggao div{
    float: left;
    /*display: block;*/
    /*-webkit-box-flex: 1;*/
    box-sizing: border-box;
    padding: 0.2rem;
  }
  .guanggao div img{
    width: 100%;
    height: 2.2rem;
  }
  .gao-banner{
    box-sizing: border-box;
    padding: 0.2rem;
  }
  .gao-banner img{
    width: 100%;
    height: 3rem;
  }
  .classList{
    margin-bottom: 0.2rem;
  }
  .classList h2{
    font-size: 13px;
    font-weight:bold ;
    color: #666;
    margin-left: 0.2rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

  }
  .class-text{
    font-size: 12px;
    margin-left: 0.2rem;
  }
  .isnull{
    width: 100%;
    text-align: center;
    margin-top: 20%;
  }
  .isnull img{
    display: block;
    margin: 0 auto;
    width: 1.2rem;
  }
  .activecate{
    background:#fff;
    color:#D50B0A;
  }
  .activecate:before{
    content:'';
    position:absolute;
    top:0;
    right:-3px;
    width:5px;
    height:100%;
    background:#fff;
  }
</style>
